<template>
    <section class="hot-houses">
        <div class="container">
            <h2 class="section-title">热门出售房源</h2>
            <p class="section-desc">在这里，每一处精心挑选的房源不仅是一栋建筑，它们承载着每一个家庭的梦想。</p>
            <div class="house-grid">
                <HouseCard 
                    v-for="house in houses.list" 
                    :key="house.houseId || house.id" 
                    :house="house"
                />
            </div>
            <div class="pagination-container">
                <el-pagination
                    v-model:current-page="queryParams.current"
                    :total="houses.total"
                    :page-size="queryParams.size"
                    layout="prev, pager, next"
                    @current-change="handlePageChange"
                />
            </div>
        </div>
    </section>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { getHotHouses } from '@/api/house'
import HouseCard from '@/views/house/components/HouseCard.vue'
import { ElMessage } from 'element-plus'

// 查询参数
const queryParams = reactive({
    current: 1,
    size: 6
})

// 房源数据
const houses = reactive({
    total: 0,
    list: []
})

// 加载状态
const loading = ref(false)

// 获取房源数据
const fetchHouses = async () => {
    loading.value = true
    try {
        console.log('获取热门房源，参数:', queryParams)
        const res = await getHotHouses({
            pageNum: queryParams.current,
            pageSize: queryParams.size,
            // 尝试传递额外参数
            page: queryParams.current,
            limit: queryParams.size,
            size: queryParams.size,
            _limit: queryParams.size // 某些API使用此参数
        })
        
        console.log('热门房源响应:', res)
        
        if (res.code === 200) {
            // 数据处理 - 兼容不同后端格式
            const records = res.data.records || res.data.list || []
            const total = res.data.total || records.length
            
            console.log('原始数据记录数:', records.length, '请求的数量:', queryParams.size)
            
            // 强制限制条数
            const limitedRecords = records.slice(0, queryParams.size)
            
            // 转换数据结构，确保字段名一致
            houses.list = limitedRecords.map(house => ({
                id: house.houseId || house.id,
                houseId: house.houseId || house.id,
                title: house.title,
                price: house.price,
                area: house.area,
                bedroom: house.bedroom,
                bathroom: house.bathroom,
                coverImage: house.coverImage,
                address: house.address || `${house.district || ''}${house.street ? ` ${house.street}` : ''}`,
                agentName: house.agentName,
                agentAvatar: house.agentAvatar
            }))
            
            houses.total = total
            
            console.log('处理后的房源数据:', houses.list.length, '条')
        } else {
            ElMessage.error(res.msg || '获取热门房源失败')
        }
    } catch (error) {
        console.error('获取热门房源出错:', error)
        ElMessage.error('获取数据失败，请稍后重试')
    } finally {
        loading.value = false
    }
}

// 处理页码变化
const handlePageChange = (page) => {
    queryParams.current = page
    fetchHouses()
}

// 组件挂载时获取数据
onMounted(fetchHouses)
</script>

<style lang="scss" scoped>
.hot-houses {
    padding: 100px 0;
    background: #fff;
    .container {
        max-width: 1920px;
        margin: 0 auto;
        padding: 0 60px;
    }
    .section-title {
        text-align: center;
        font-size: 32px;
        color: #2F3B59;
        margin-bottom: 16px;
    }
    .section-desc {
        text-align: center;
        color: #666;
        max-width: 696px;
        margin: 0 auto 40px;
        line-height: 1.6;
    }
    .house-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
        margin-bottom: 40px;
        max-width: 1320px;
        margin: 0 auto 40px;
    }
    .pagination-container {
        display: flex;
        justify-content: center;
        margin-top: 20px;
        margin-bottom: 40px;
    }
}
</style> 